<template>
	<view class="page_box">
		<u-navbar :is-back="true" title="消费清单" v-if="1" :border-bottom="false"></u-navbar>

		<view class="content_box">
		
			<view class="content-item bg-img">
				<view class="card-box" style="padding-left: 50rpx;">
					<u-time-line>
						<u-time-line-item nodeTop="-6" class="active">
							<template v-slot:node>
								<view class="u-node">
									<text class="ico-num">1</text>
								</view>
							</template>
							<template v-slot:content>
								<view class="time-cont">
									<view class="u-title-box flex align-center justify-between">
										<view class="u-title">预算清单</view>
										<view class="u-right flex align-center">
											<text class="right-tipc">已提交</text>
											<u-icon name="arrow-right" color="#717171" size="24"></u-icon>
										</view>
									</view>
								</view>
							</template>
						</u-time-line-item>
						<u-time-line-item nodeTop="-6" class="active">
							<template v-slot:node>
								<view class="u-node">
									<text class="ico-num">1</text>
								</view>
							</template>
							<template v-slot:content>
								<view class="time-cont">
									<navigator url="../decoration_hall/confirm_field_measurement" hover-class="none" class="u-title-box flex align-center justify-between">
										<view class="u-title">实地测量</view>
										<view class="u-right flex align-center">
											<text class="right-tipc">未确认</text>
											<u-icon name="arrow-right" color="#717171" size="24"></u-icon>
										</view>
									</navigator>
									<navigator url="../decoration_hall/confirm_field_measurement" hover-class="none" class="img-content flex flex-wrap">
										<view class="img-box">
											<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/bj.png" class="img" mode="aspectFill"></image>
										</view>
										<view class="img-box">
											<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/bj.png" class="img" mode="aspectFill"></image>
										</view>
									</navigator>
								</view>
							</template>
						</u-time-line-item>
						<u-time-line-item nodeTop="-6">
							<template v-slot:node>
								<view class="u-node">
									<text class="ico-num">1</text>
								</view>
							</template>
							<template v-slot:content>
								<view class="time-cont">
									<navigator hover-class="none" url="../decoration_hall/confirm_design_draft" class="u-title-box flex align-center justify-between">
										<view class="u-title">设计效果图</view>
										<view class="u-right flex align-center">
											<text class="right-tipc">未确认</text>
											<u-icon name="arrow-right" color="#717171" size="24"></u-icon>
										</view>
									</navigator>
									<navigator hover-class="none" url="../decoration_hall/confirm_design_draft" class="img-content flex flex-wrap">
										<view class="img-box">
											<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/bj.png" class="img" mode="aspectFill"></image>
										</view>
										<view class="img-box">
											<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/bj.png" class="img" mode="aspectFill"></image>
										</view>
									</navigator>
								</view>
							</template>
						</u-time-line-item>
						<u-time-line-item nodeTop="-6">
							<template v-slot:node>
								<view class="u-node">
									<text class="ico-num">1</text>
								</view>
							</template>
							<template v-slot:content>
								<view class="time-cont">
									<navigator url="../personal/my_contract" hover-class="none" class="u-title-box flex align-center justify-between">
										<view class="u-title">确认合同</view>
										<view class="u-right flex align-center">
											<text class="right-tipc">已提交</text>
											<u-icon name="arrow-right" color="#717171" size="24"></u-icon>
										</view>
									</navigator>
								</view>
							</template>
						</u-time-line-item>
						<u-time-line-item nodeTop="-6">
							<template v-slot:node>
								<view class="u-node">
									<text class="ico-num">1</text>
								</view>
							</template>
							<template v-slot:content>
								<view class="time-cont">
									<view class="u-title-box flex align-center justify-between" @click="xffw_modal_show = true">
										<view class="u-title">消费服务</view>
										<view class="u-right flex align-center">
											<text class="right-tipc">已提交</text>
											<u-icon name="arrow-right" color="#717171" size="24"></u-icon>
										</view>
									</view>
								</view>
							</template>
						</u-time-line-item>
						<u-time-line-item nodeTop="-6">
							<template v-slot:node>
								<view class="u-node">
									<text class="ico-num">1</text>
								</view>
							</template>
							<template v-slot:content>
								<view class="time-cont">
									<view class="u-title-box flex align-center justify-between" @click="sjxfsj_modal_show = true">
										<view class="u-title">升级消费商</view>
										<view class="u-right flex align-center">
											<text class="right-tipc">已提交</text>
											<u-icon name="arrow-right" color="#717171" size="24"></u-icon>
										</view>
									</view>
									<view class="context">升级消费商请前往趣赚大厅进行升级</view>
								</view>
							</template>
						</u-time-line-item>
					</u-time-line>
				</view>
				<u-divider bg-color="#FB5F38" height="119" half-width="46" fontSize="34" color="#FFEFE3">售前联系电话</u-divider>
				<view class="card-box">
					<view class="contact-item flex">
						<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_dh.png" style="width: 60rpx;height: 60rpx;"></image>
						<view class="contact-text">
							<view class="text-title f30">13573284521</view>
							<view class="text-tipc f24">此电话适用于预算清单、实地测量、设计效果、确认合同阶段</view>
						</view>
					</view>
					<view class="contact-item flex">
						<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_dh.png" style="width: 60rpx;height: 60rpx;"></image>
						<view class="contact-text">
							<view class="text-title f30">13573284521</view>
							<view class="text-tipc f24">此电话适用于消费服务阶段</view>
						</view>
					</view>
					<view class="contact-item flex">
						<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_dh.png" style="width: 60rpx;height: 60rpx;"></image>
						<view class="contact-text">
							<view class="text-title f30">13573284521</view>
							<view class="text-tipc f24">此电话适用于升级为消费商阶段</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 弹窗 -->
			<u-modal
				v-model="xffw_modal_show" 
				:show-cancel-button="true" 
				title="消费服务" 
				content="是否确认已完成消费服务？"
				@confirm="xffwconfirm"
			>
			</u-modal>
			<u-modal
				v-model="sjxfsj_modal_show" 
				:show-cancel-button="true" 
				title="升级消费商家" 
				content="是否要升级为消费商家？"
				@confirm="sjxfsjconfirm"
			>
			</u-modal>
		</view>

		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
	
	</view>
</template>

<script>
export default {
	data() {
		return {
			xffw_modal_show:false,
			sjxfsj_modal_show:false,
		};
	},
	onShow() {
		
	},
	onLoad(e) {},
	methods: {
		xffwconfirm(){
			uni.showToast({
				title:'消费服务确认成功',
				icon:'none'
			})
		},
		sjxfsjconfirm(){
			uni.showToast({
				title:'成功升级消费商家',
				icon:'none'
			})
		},
	}
};
</script>

<style lang="scss" scoped>
.page_box {
	width: 100vw;
	height: 100vh;
}
/deep/.u-time-axis-node{
	background: none !important;
}
/deep/.u-time-axis::before {
	border-left: 10rpx dotted #FFBAAC !important;
}
.content_box {	
	.content-item{
		background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210621140438.png);
		padding-bottom: 50rpx;
		padding-top: 496rpx;
	}
	.card-box{
		background: #ffefe3;
		border-radius: 20rpx;
		padding: 40rpx 20rpx;		
		.time-cont{
			padding-bottom: 50rpx;
		}
		.u-node{
			width: 60rpx;
			height: 60rpx;
			background: white;
			border-radius: 50% !important;
			overflow: hidden;
			text-align: center;
			line-height: 60rpx;
			text{
				color: #FF7166;
			}
		}
		.u-title{
			background: rgba(251,95,59,0.2);
			border-radius: 30rpx;
			padding: 0 40rpx 0 60rpx;
			height: 48rpx;
			line-height: 48rpx;
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			color: #fb5f3b;
			margin-left: -50rpx;
		}
		.u-right{
			.right-tipc{
				color: #717171;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 500;
			}
		}
		.img-content{
			.img-box{
				width: 140rpx;
				height: 140rpx;
				border-radius: 20rpx;
				border: 5rpx solid white;
				overflow: hidden;
				margin: 30rpx 30rpx 30rpx 0;
				.img{
					width: 100%;
					height: 100%;
				}
			}
		}
		.context{
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			color: #ffa08a;
			margin-top: 16rpx;
		}
		.active{
			.u-node{
				background: #FB5F3B !important;
				text{
					color: white !important;
				}
			}
		}
		.contact-text{
			margin-left: 20rpx;
			width: 86%;
			.text-title{
				color: #FB5F3B;
				margin-top: 14rpx;
			}
			.text-tipc{
				color: #FFA08A;
				margin-top: 20rpx;
			}
		}
		.contact-item{
			margin-bottom: 36rpx;
		}
	}
}
</style>
